<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单确认</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .icon {
            font-size: 1.2rem;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .submit-btn {
            background: linear-gradient(to right, #0052d9, #1890ff);
        }
    </style>
</head>
<body class="min-h-screen pb-24">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="javascript:history.back()" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">确认订单</h1>
        <div class="w-6"></div>
    </header>

    <main>
        <!-- 收货地址 -->
        <div class="mt-3 px-4">
            <div class="bg-white card p-4">
                <div class="flex items-start">
                    <div class="flex-1">
                        <div class="flex items-center">
                            <span class="font-medium">李明</span>
                            <span class="ml-3 text-gray-700">13800138000</span>
                            <span class="ml-2 px-1.5 py-0.5 bg-blue-50 text-blue-500 text-xs rounded">默认</span>
                        </div>
                        <div class="mt-2 text-gray-600 text-sm">
                            贵州省贵阳市观山湖区金阳大道299号贵州金融城10栋2单元1203室
                        </div>
                    </div>
                    <i class="icon iconfont icon-arrow-right text-gray-400 ml-2"></i>
                </div>
                <div class="mt-3 pt-3 border-t border-dashed border-gray-200 flex">
                    <div class="flex items-center text-sm text-gray-600">
                        <i class="icon iconfont icon-location text-blue-500 mr-1 text-sm"></i>
                        <span>地图定位收货地址</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-600 ml-auto">
                        <i class="icon iconfont icon-list text-blue-500 mr-1 text-sm"></i>
                        <span>地址管理</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 商品信息 -->
        <div class="mt-3 px-4">
            <!-- 店铺1 -->
            <div class="bg-white card mb-3">
                <div class="p-3 border-b border-gray-100 flex items-center">
                    <i class="icon iconfont icon-shop mr-1 text-gray-600"></i>
                    <span class="text-sm font-medium">清镇苗族手工艺品店</span>
                </div>
                
                <!-- 商品1 -->
                <div class="p-3 flex">
                    <div class="w-20 h-20 bg-gray-100 rounded-md overflow-hidden">
                        <img src="https://via.placeholder.com/80x80?text=苗族银饰" class="w-full h-full object-cover" alt="苗族银饰">
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="text-sm font-medium">贵州苗族银饰项链 传统手工艺 民族特色礼品</div>
                        <div class="text-xs text-gray-500 mt-1">规格：925银</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-medium">¥298.00</div>
                            <div class="text-gray-500 text-sm">x1</div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品2 -->
                <div class="p-3 flex border-t border-gray-100">
                    <div class="w-20 h-20 bg-gray-100 rounded-md overflow-hidden">
                        <img src="https://via.placeholder.com/80x80?text=蜡染" class="w-full h-full object-cover" alt="蜡染">
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="text-sm font-medium">贵州侗族蜡染围巾 纯棉手工艺品</div>
                        <div class="text-xs text-gray-500 mt-1">规格：180*60cm</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-medium">¥168.00</div>
                            <div class="text-gray-500 text-sm">x1</div>
                        </div>
                    </div>
                </div>
                
                <!-- 配送方式 -->
                <div class="p-3 border-t border-gray-100 flex justify-between items-center">
                    <span class="text-sm">配送方式</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-700">快递 免邮</span>
                        <i class="icon iconfont icon-arrow-right text-gray-400 text-xs ml-1"></i>
                    </div>
                </div>
                
                <!-- 发票信息 -->
                <div class="p-3 border-t border-gray-100 flex justify-between items-center">
                    <span class="text-sm">发票信息</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-700">电子发票</span>
                        <i class="icon iconfont icon-arrow-right text-gray-400 text-xs ml-1"></i>
                    </div>
                </div>
                
                <!-- 优惠券 -->
                <div class="p-3 border-t border-gray-100 flex justify-between items-center">
                    <span class="text-sm">优惠券</span>
                    <div class="flex items-center">
                        <span class="text-sm text-red-500">满300减30</span>
                        <i class="icon iconfont icon-arrow-right text-gray-400 text-xs ml-1"></i>
                    </div>
                </div>
                
                <!-- 店铺小计 -->
                <div class="p-3 border-t border-gray-100 flex justify-between items-center">
                    <span class="text-sm">店铺合计</span>
                    <div class="text-sm font-medium">¥436.00</div>
                </div>
            </div>
            
            <!-- 店铺2 -->
            <div class="bg-white card mb-3">
                <div class="p-3 border-b border-gray-100 flex items-center">
                    <i class="icon iconfont icon-shop mr-1 text-gray-600"></i>
                    <span class="text-sm font-medium">茅台镇酱香白酒旗舰店</span>
                </div>
                
                <!-- 商品1 -->
                <div class="p-3 flex">
                    <div class="w-20 h-20 bg-gray-100 rounded-md overflow-hidden">
                        <img src="https://via.placeholder.com/80x80?text=白酒" class="w-full h-full object-cover" alt="白酒">
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="text-sm font-medium">贵州茅台镇酱香型白酒 53度500ml 传统工艺</div>
                        <div class="text-xs text-gray-500 mt-1">规格：酱香型·礼盒装</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-medium">¥399.00</div>
                            <div class="text-gray-500 text-sm">x2</div>
                        </div>
                    </div>
                </div>
                
                <!-- 配送方式 -->
                <div class="p-3 border-t border-gray-100 flex justify-between items-center">
                    <span class="text-sm">配送方式</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-700">快递 顺丰 ¥15</span>
                        <i class="icon iconfont icon-arrow-right text-gray-400 text-xs ml-1"></i>
                    </div>
                </div>
                
                <!-- 发票信息 -->
                <div class="p-3 border-t border-gray-100 flex justify-between items-center">
                    <span class="text-sm">发票信息</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-700">不开发票</span>
                        <i class="icon iconfont icon-arrow-right text-gray-400 text-xs ml-1"></i>
                    </div>
                </div>
                
                <!-- 优惠券 -->
                <div class="p-3 border-t border-gray-100 flex justify-between items-center">
                    <span class="text-sm">优惠券</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-500">无可用</span>
                        <i class="icon iconfont icon-arrow-right text-gray-400 text-xs ml-1"></i>
                    </div>
                </div>
                
                <!-- 店铺小计 -->
                <div class="p-3 border-t border-gray-100 flex justify-between items-center">
                    <span class="text-sm">店铺合计</span>
                    <div class="text-sm font-medium">¥813.00</div>
                </div>
            </div>
        </div>
        
        <!-- 支付方式 -->
        <div class="mt-3 px-4">
            <div class="bg-white card p-4">
                <h3 class="text-base font-medium mb-3">支付方式</h3>
                
                <div class="flex items-center py-2">
                    <div class="flex items-center flex-1">
                        <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3">
                            <i class="icon iconfont icon-wechat text-white text-sm"></i>
                        </div>
                        <span class="text-sm">微信支付</span>
                    </div>
                    <input type="radio" name="payment" checked class="w-4 h-4 accent-blue-600">
                </div>
                
                <div class="flex items-center py-2 mt-2">
                    <div class="flex items-center flex-1">
                        <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mr-3">
                            <i class="icon iconfont icon-pay text-white text-sm"></i>
                        </div>
                        <span class="text-sm">积分抵扣</span>
                        <span class="text-xs text-gray-500 ml-2">可用520积分抵¥5.2</span>
                    </div>
                    <input type="checkbox" class="w-4 h-4 accent-blue-600">
                </div>
            </div>
        </div>
        
        <!-- 订单备注 -->
        <div class="mt-3 px-4">
            <div class="bg-white card p-4">
                <h3 class="text-base font-medium mb-3">订单备注</h3>
                <textarea placeholder="请输入备注信息（选填）" class="w-full p-2 border border-gray-200 rounded-md text-sm h-20 resize-none focus:outline-none focus:border-blue-400"></textarea>
            </div>
        </div>
    </main>
    
    <!-- 底部结算栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-3">
        <div class="flex justify-between items-center mb-2">
            <span class="text-sm text-gray-600">商品金额</span>
            <span class="text-sm">¥1264.00</span>
        </div>
        <div class="flex justify-between items-center mb-2">
            <span class="text-sm text-gray-600">运费</span>
            <span class="text-sm">¥15.00</span>
        </div>
        <div class="flex justify-between items-center mb-2">
            <span class="text-sm text-gray-600">优惠券</span>
            <span class="text-sm text-red-500">-¥30.00</span>
        </div>
        <div class="flex justify-between items-center">
            <div class="text-sm">
                实付款
                <span class="text-red-500 font-medium ml-1">¥1249.00</span>
            </div>
            <button class="submit-btn text-white rounded-full px-6 py-2 text-sm font-medium">
                提交订单
            </button>
        </div>
    </div>
</body>
</html> 